<!DOCTYPE html>
<HTML>
	<HEAD>
		<TITLE>ZTREE DEMO - left_menu</TITLE>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="resources/css/ztree/demo.css"
			type="text/css">
		<link rel="stylesheet" href="resources/css/ztree/zTreeStyle.css"
			type="text/css">
		<script type="text/javascript"
			src="resources/js/jquery/jquery-1.4.4.min.js"></script>
		<script type="text/javascript"
			src="resources/js/ztree/jquery.ztree.core-3.5.js"></script>
		<SCRIPT type="text/javascript">
	var curMenu = null, zTree_Menu = null;
	var setting = {
		view : {
			showLine : false,
			selectedMulti : false,
			dblClickExpand : false
		},
		data : {
			simpleData : {
				enable : true
			}
		},
		callback : {
			//onNodeCreated : this.onNodeCreated,
		//beforeClick : this.beforeClick,
		onClick : this.onClick
	}
	};

	var zNodes = [ {
		id : 1,
		pId : 0,
		name : "我的主页",
		open : true
	}, {
		id : 11,
		pId : 1,
		name : "我的空间"
	}, {
		id : 111,
		pId : 11,
		name : "我的日志"
	}, {
		id : 112,
		pId : 11,
		name : "我的照片"
	}, {
		id : 12,
		pId : 1,
		name : "我的微博"
	}, {
		id : 121,
		pId : 12,
		name : "我的关注"
	}, {
		id : 122,
		pId : 12,
		name : "微博圈"
	}, {
		id : 1221,
		pId : 122,
		name : "朋友圈"
	}, {
		id : 2,
		pId : 0,
		name : "通知公告",
		open : true
	}, {
		id : 21,
		pId : 2,
		name : "本站公告",
		open : true
	}, {
		id : 211,
		pId : 21,
		name : "本站新闻"
	}, {
		id : 212,
		pId : 21,
		name : "本站通知"
	}, {
		id : 22,
		pId : 2,
		name : "本市通知"
	}, {
		id : 221,
		pId : 22,
		name : "财政通知"
	}, {
		id : 222,
		pId : 22,
		name : "天气通知"
	}, {
		id : 223,
		pId : 22,
		name : "交通通知"
	}, {
		id : 3,
		pId : 0,
		name : "娱乐新闻",
		open : true
	}, {
		id : 31,
		pId : 3,
		name : "国内娱乐"
	}, {
		id : 32,
		pId : 3,
		name : "国外娱乐"
	}, {
		id : 4,
		pId : 0,
		name : "通讯录",
		open : true
	}, {
		id : 41,
		pId : 4,
		name : "我的联系人"
	}  ];

	function beforeClick(treeId, node) {
		if (node.isParent) {
			if (node.level == 0) {
				var pNode = curMenu;
				while (pNode && pNode.level !== 0) {
					pNode = pNode.getParentNode();
				}
				if (pNode !== node) {
					var a = $("#" + pNode.tId + "_a");
					a.removeClass("cur");
					zTree_Menu.expandNode(pNode, false);
				}
				a = $("#" + node.tId + "_a");
				a.addClass("cur");

				var isOpen = false;
				for ( var i = 0, l = node.children.length; i < l; i++) {
					if (node.children[i].open) {
						isOpen = true;
						break;
					}
				}
				if (isOpen) {
					zTree_Menu.expandNode(node, true);
					curMenu = node;
				} else {
					zTree_Menu
							.expandNode(
									node.children[0].isParent ? node.children[0]
											: node, true);
					curMenu = node.children[0];
				}
			} else {
				zTree_Menu.expandNode(node);
			}
		}
		return !node.isParent;
	}
	function onClick(e, treeId, node) {
		//alert("Do what you want to do!");
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.expandNode(node);
	}

	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
		curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
		zTree_Menu.selectNode(curMenu);
		var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
		a.addClass("cur");
	});
</SCRIPT>
		<style type="text/css">
<!--
.ztree li a.level0 {
	width: 200px;
	height: 20px;
	text-align: center;
	display: block;
	background-color: #0B61A4;
	border: 1px silver solid;
}

.ztree li a.level0.cur {<!--
	background-color: #66A3D2; -->
	background-color: #0B61A4;
}

.ztree li a.level0 span {
	display: block;
	color: white;
	padding-top: 3px;
	font-size: 12px;
	font-weight: bold;
	word-spacing: 2px;
}

.ztree li a.level0 span.button {
	float: right;
	margin-left: 10px;
	visibility: visible;
	display: none;
}

.ztree li span.button.switch.level0 {
	display: none;
}
-->
</style>
	</HEAD>
	<BODY
		style="background-color: #BBEFF0; height: 100%; width: 100%; margin: 0; overflow: hidden;">

		<div
			style="width: 100%; position: absolute; overflow: auto; top: 24px; bottom: 0px;">
			<ul id="treeDemo" class="ztree"></ul>
		</div>

	</BODY>
</HTML>
